<!DOCTYPE html>

<html class="no-js">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title></title>
  <meta name="description" content="" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.staticfile.org/vue/2.5.17/vue.js"></script>
  <script src="https://cdn.staticfile.org/element-ui/2.13.0/index.js"></script>
  <!-- <script src="https://cdn.staticfile.org/echarts/4.2.1-rc1/echarts.min.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.min.js"></script>

  <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.5/echarts-gl.js"></script>
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.13.0/theme-chalk/index.css" />
  <link rel="stylesheet" href="../../../lib/index.css" />
  <script src="../../../lib/avue.js"></script>
  <script src="../theme/avue.project.js"></script>
  <script src="../theme/halloween.project.js"></script>
  <script src="../theme/wonderland.project.js"></script>

</head>

<body>
  <div id="app">
    <el-button @click='change1'>换紫色主题</el-button>
    <el-button @click='change2'>换绿色主题</el-button>
    <avue-echart-bar3d :theme='theme' ref="echart" :width="config.width" :height="config.height" :option="config"
      :data="apiData">
    </avue-echart-bar3d>
  </div>
</body>
<script>
  window.echarts.registerTheme(theme.themeName, theme.theme)
  window.echarts.registerTheme(theme1.themeName, theme1.theme)
  window.echarts.registerTheme(theme2.themeName, theme2.theme)
  new Vue({
    el: '#app',
    data() {
      return {
        theme: theme.themeName,
        apiData: {
          // "categories": [
          //   "北京",
          //   "上海",
          // ],
          
          "series": [{
            "type": 'bar3D',
            "name":'1',
            "barSize": 15,
            "data": [
                    [0, 0, 1200+1200+1800],
                    [2, 0, 10000],
                    // [4, 0, 6000],
                ]
          }, {
            "type": 'bar3D',
            "name":'1',
            "barSize": 15,
            "data": [
                    [1, 0, 12000],
                    [3, 0, 60000],
                    // [5, 0, 12000],
                ],
          }]
        },
        config: {
          yAxisSplitLineShow:false,
          // switchTheme: true,
          // title: '2019年度潍坊城市销售额排名',
          // titlePostion: '',
          // titleFontSize: 24,
          // titleColor: 'rgb(115, 170, 229)',
          // titleShow: true,
          // legend: false,
          // width: 1200,
          // height: 600,
          // gridX: 105,
          // gridY: 50,
          // gridX2: 80,
          // gridY2: 100,
          // nameColor: '#333',
          // lineColor: '#333',
          // xNameFontSize: 16,
          // yNameFontSize: 16,
          // labelShow: false,
          // labelShowFontSize: 14,
          // labelShowFontWeight: 300,
          // yAxisInverse: false,
          // xAxisInverse: false,
          // xAxisShow: true,
          // yAxisShow: true,
          // xAxisSplitLineShow: false,
          // yAxisSplitLineShow: false,
          // refresh: 3000,
          // barWidth: 30,
          // barRadius: 8,
          // labelShow: true,
          // barColor: [{
          //   color1: '#83bff6',
          //   color2: '#188df0',
          //   postion: 90
          // }, {
          //   color1: '#23B7E5',
          //   color2: '#564AA3',
          //   postion: 50
          // }],
          // barMinHeight: 2,
        }
      }
    },
    mounted() { },
    methods: {
      change1() {
        this.theme = theme1.themeName
      },
      change2() {
        this.theme = theme2.themeName
      },
      getVal() {
        try {
          this.apiData = JSON.parse(this.apiText)
        } catch (error) {
          this.$message.error('数据格式错误');
          return
        }
        this.$message.success('刷新成功');
      },
      handleChange(item) {
        this.type = item.prop;
        if (this.type === 'data') {
          this.jsonView();
        }
      },
      jsonView() {
        setTimeout(() => {
          if (!this.apiFirst) {
            this.CodeMirrorEditor = CodeMirror.fromTextArea(document.getElementById('code'), {
              lineNumbers: true,
              mode: 'application/json',
              gutters: ['CodeMirror-lint-markers'],
              theme: 'rubyblue',
              lint: true
            });
            this.apiText = JSON.stringify(this.apiData, null, 2);
            this.CodeMirrorEditor.setValue(this.apiText)
            this.apiFirst = true;
            this.CodeMirrorEditor.on("change", (e) => {
              this.apiText = e.getValue();
            });
          }
        }, 0)
      },
      rowSave(row, done) {
        this.config.barColor.push(row);
        done()
      },
      rowDel(row, index) {
        this.config.barColor.splice(index, 1);
      },
      rowUpdate(row, index, done) {
        this.config.barColor.splice(index, 1, row);
        done()
      }
    }
  })

</script>

</html>